<template>
  <div class="drawer_box">
    <el-tabs v-model="activeNamegz" type="card" @tab-click="handleClickTabGz">
        <el-tab-pane label='列表' name="lb"></el-tab-pane>
        <el-tab-pane label="新增" name="xz"></el-tab-pane>
        <!-- <el-tab-pane label="已处理" name="ycl"></el-tab-pane> -->
      </el-tabs>

     <div v-if="activeNamegz == 'lb'" style="width: 100%;
     height: 100%; display: flex; justify-content: space-between;">
      <div class="table_box isTable">
      <el-divider content-position="left">流程卡点图</el-divider>
      <el-table @cell-click="cellClik" height="100" :data="tableDataCv" border style="width: 100%">
    
        <el-table-column prop="name"   align="center" />
      </el-table>
      <el-divider content-position="left">预案列表</el-divider>
      <el-table @cell-click="cellClik" height="500" :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="name" label="名称"  align="center" />
      </el-table>
    </div>

    <div class="pdf_box">
      <el-divider content-position="left">文件展示</el-divider>
      <div class="iframe-file-box">
        <iframe :src="url + '#view=FitH&toolbar=0'" 
           width='101.5%'
        height="100%"
    name="iframeName" scrolling="no" frameborder="0"></iframe>
      </div>
    </div>
     </div>

      <div v-else class="save_box">
          <div style="display: flex; align-items: center;margin-bottom: 40px" > 
             <div style="margin-right: 6px;">
                预案名称
             </div>
             <div style="margin-right: 6px;">
              <el-input v-model="inputs" style="width: 340px" placeholder="输入" />
             </div>
          </div>
          <div style="display: flex; align-items: center"> 
             <div style="margin-right: 6px;">
                预案内容
             </div>
             <div style="margin-right: 6px; ">
              <el-input v-model="inputs"   type="textarea" :rows="4" style="margin-bottom: 40px;width: 340px" placeholder="输入" />
             </div>
          </div>
          <div style="display: flex; align-items: center"> 
             <div style="margin-right: 6px;">
                预案文件
             </div>
             <div style="margin-right: 6px;">
              <el-upload
    ref="uploadRef"
    class="upload-demo"
    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="primary">上传文件</el-button>
    </template>


 
  </el-upload>
             </div>
          </div>
      </div>
  </div>
</template>

<script setup>
import http from "@/utils/api";
import {
  Search,
  Share,
  Upload,
  TakeawayBox,
  Refresh,
  Collection,
  Plus,
  Loading,
  FolderDelete,
  Back,
} from "@element-plus/icons-vue";
import {
  ref,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  onBeforeMount,
  nextTick,
  onUnmounted,
} from "vue";
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  sonData: {
    type: String,
    default: "",
  },
  orgIds: {
    type: Object,
    default: {},
  },
  jqArr: {
    type: Array,
    default: [],
  },
});
const activeNamegz = ref('lb')
const inputs = ref('')
const url = ref('http://192.168.2.15:8006/dzz/%E5%85%9A%E7%AB%A0-20240611141729-20241105182750.pdf')
const tableData = [
  {
    date: '2016-05-03',
    name: '流程图',
  },
  {
    date: '2016-05-02',
    name: '卡点图',
  },
  {
    date: '2016-05-04',
    name: '应急预案1',
  },
  {
    date: '2016-05-01',
    name: '应急预案2',
  },
  {
    date: '2016-05-01',
    name: '应急预案3',
  },
  {
    date: '2016-05-01',
    name: '应急预案4',
  },
]
const tableDataCv = [
  {
    date: '2016-05-03',
    name: '流程图',
  },
  {
    date: '2016-05-02',
    name: '卡点图',
  },

]

const handleClickTabGz =()=>{

}
const cellClik = (row)=>{
   console.log(row);
   

}

</script>

<style scoped lang="scss">
::v-deep .el-divider--horizontal{
  margin: 13px 0;
}
.save_box{
  height: 600px;
}
.iframe-file-box{
  height:94%;
  overflow:hidden;
}
::v-deep .isTable .el-table {
  .cell {
    height: 30px;
    text-align: center;
    // border: 1px solid #ccc;

    font-size: 12px;
    line-height: 30px;
  }
}
.drawer_box {
  width: 100%;
  height: 100%;
  position: relative;

  justify-content: space-between;
  .table_box {
    width: 30%;
    height: 660px;
   
  }
  .pdf_box {
    width: 68%;
    height: 660px;
  
  }
}
</style>
